<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>力导向图</title>
  <script type="text/javascript" src="http://d3js.org/d3.v5.min.js"></script>
</head>

<body>
  <svg width="960" height="600" style="border:1px solid grey"></svg>
  <script>

    var marge = { top: 60, bottom: 60, left: 60, right: 60 }
    var svg = d3.select("svg")
    var width = svg.attr("width")
    var height = svg.attr("height")
    var g = svg.append("g")
      .attr("transform", "translate(" + marge.top + "," + marge.left + ")");

    //准备数据，点
    var nodes = [//节点集
      { name: "湖南邵阳" }, //index: 0
      { name: "山东莱州" }, //index: 1
      { name: "广东阳江" }, //index: 2 
      { name: "山东枣庄" }, //index: 3
      { name: "泽" }, //index: 4
      { name: "恒" }, //index: 5
      { name: "鑫" }, //index: 6
      { name: "明山" }, //index: 7
      { name: "班长" } //index: 8
    ];
    //边集，用于描述连接两点的线条
    var edges = [
      { source: 0, target: 4, relation: "籍贯", value: 1.3 },//value为线长度
      { source: 4, target: 5, relation: "舍友", value: 5 },
      { source: 4, target: 6, relation: "舍友", value: 1 },
      { source: 4, target: 7, relation: "舍友", value: 1 },
      { source: 1, target: 6, relation: "籍贯", value: 2 },
      { source: 2, target: 5, relation: "籍贯", value: 0.9 },
      { source: 3, target: 7, relation: "籍贯", value: 1 },
      { source: 5, target: 6, relation: "同学", value: 1.6 },
      { source: 6, target: 7, relation: "朋友", value: 0.7 },
      { source: 6, target: 8, relation: "职责", value: 2 }
    ];

    //设置一个color的颜色比例尺，为了让不同的扇形呈现不同的颜色
    var colorScale = d3.scaleOrdinal()
      .domain(d3.range(nodes.length))
      .range(d3.schemeCategory10);

    //新建一个力导向图
    // force(name, force)，指定名字分配力
    var forceSimulation = d3.forceSimulation()
      .force("link", d3.forceLink()) //链接力
      .force("charge", d3.forceManyBody())  //斥力，节点相互之间产生排斥
      .force("center", d3.forceCenter());   //居中力，中心引力，避免节点聚集在一起或分散得太远

    //初始化力导向图，也就是传入数据
    //生成节点集数据
    forceSimulation.nodes(nodes)
      .on("tick", ticked);//开始或每次迭代力模拟时，tick事件将被触发

    //生成边数据
    forceSimulation.force("link")
      .links(edges)
      .distance(function (d) {//每一边的长度
        return d.value * 100;
      })

    //设置图形的中心位置	
    forceSimulation.force("center")
      .x(width / 2)
      .y(height / 2);

    //在浏览器的控制台输出
    console.log("nodes:",nodes);
    console.log("edges:",edges);

    //有了节点和边的数据后，我们开始绘制
    //绘制边
    var links = g.append("g")
      .selectAll("line")
      .data(edges)
      .enter()
      .append("line")
      .attr("stroke", function (d, i) {
        return colorScale(i);
      })
      .attr("stroke-width", 1);

    // 边上的文字
    var linksText = g.append("g")
      .selectAll("text")
      .data(edges)
      .enter()
      .append("text")
      .text(function (d) {
        return d.relation;
      })

    //绘制节点
    //老规矩，先为节点和节点上的文字分组g
    var gCircle = g.selectAll(".circleText")
      .data(nodes)
      .enter()
      .append("g")
      .attr("transform", function (d, i) {
        console.log("绘制节点:", d)
        var cirX = d.x;
        var cirY = d.y;
        return "translate(" + cirX + "," + cirY + ")";
      })
      .call(d3.drag()
        .on("start", started)
        .on("drag", dragged)
        .on("end", ended)
      );

    //绘制节点
    gCircle.append("circle")
      .attr("r", 10)
      .attr("fill", function (d, i) {
        return colorScale(i);
      })
    //文字
    gCircle.append("text")
      .attr("x", -10)
      .attr("y", -20)
      .attr("dy", 10)  //向下偏移
      .text(function (d) {
        return d.name;
      })


    // ticked函数的实现
    // 通过调用力模拟的force方法来更新节点和链接的位置，以模拟节点之间的受力和运动
    // 更新节点和链接的位置，以实现节点的运动、重绘和布局
    function ticked() {
      links
        .attr("x1", function (d) { return d.source.x; })
        .attr("y1", function (d) { return d.source.y; })
        .attr("x2", function (d) { return d.target.x; })
        .attr("y2", function (d) { return d.target.y; });

      linksText
        .attr("x", function (d) {
          return (d.source.x + d.target.x) / 2;
        })
        .attr("y", function (d) {
          return (d.source.y + d.target.y) / 2;
        });

      gCircle.attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"; });
    }


    // drag
    function started(d) {
      if (!d3.event.active) {
        forceSimulation.alphaTarget(0.8).restart(); //设置衰减系数，对节点位置移动过程的模拟，数值越高移动越快，数值范围[0，1]
      }
      d.fx = d.x;
      d.fy = d.y;
    }

    function dragged(d) {
      d.fx = d3.event.x;
      d.fy = d3.event.y;
    }

    function ended(d) {
      if (!d3.event.active) {
        forceSimulation.alphaTarget(0);
      }
      d.fx = null;
      d.fy = null;
    }
  </script>
</body>

</html>
